import { 
  Color,
  Mesh,
  PerspectiveCamera,
  Scene, 
  WebGLRenderer
} from "three";
import stats from '../../utils/stats';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import * as MeshLine from 'three.meshline';

const scene = new Scene();
const camera = new PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.set(340, 105, -180);

const renderer = new WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const segmentLength = 1;
const points = [];
for (let i = 0; i < 10; i++) {
  points.push(i * segmentLength, 0, 0)
}

// const line = new MeshLine();
// line.setGeometry(points);
// const geometry = line.geometry;

// const material = new MeshLineMaterial({
//   transparent: true,
//   lineWidth: 0.1,
//   color: new Color(0xff0000),
//   dashArray: 2,
//   dashOffset: 0,
//   dashRation: 0.75,
// });

// const lineMesh = new Mesh(geometry, material);
// lineMesh.position.x = -4.5;

// scene.add(lineMesh);

const orbitControls = new OrbitControls(camera, renderer.domElement);

function render() {
  stats.update();
  orbitControls.update();

  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

render();